<template>
    <div class="upload-shear-img-com">
        <div class="title-box">
            <div class="title">
                <template v-if="height === 1440">
                    <span>1.精选展示位图</span>
                    <span class="title-desc">(1080 x 1440)</span>
                </template>
                <template v-if="height === 528">
                    <span>2.banner</span>
                    <span class="title-desc">(1080 x 528)</span>
                </template>
                <template v-if="height === 720">
                    <span>3.其它图片</span>
                    <span class="title-desc">(560 x 720)</span>
                </template>
            </div>
            <div class="upload-btn">
                <span class="btn-text">上传图片</span>
                <input type="file" ref="input" @change="imgInput" class="input-file" accept=".jpg,.jpeg,.png">
            </div>
        </div>

        <div class="input-all-box">
            <div class="input-show-box"
                @click="showListImg(height)"
                :style="{'width': width / 4 + 'px', 'height': height / 4 + 'px'}">
                <img src="./img/1440.png" alt="" v-if="height === 1440">
                <img src="./img/528.png" alt="" v-if="height === 528">
                <div style="height:100%;background:rgb(214, 241, 254);" v-if="height === 720"></div>
            </div>

            <div class="right-box">
                <div class="right-box-with" :style="{'width': (width / 4 + 20) * list.length + 'px'}">
                    <div class="right-all-box"
                        v-for="(item, index) in list"
                        :key="index"
                        :style="{'width': width / 4 + 'px'}">
                        <div class="right-img-box"
                            v-loading="item.loading"
                            :style="{'width': width / 4 + 'px', 'height': height / 4 + 'px'}">
                            <img :src="item.url" alt="" class="img-box">
                            <div class="wrap-img-box">
                                <div class="main-top-box-1440" v-if="height === 1440"><span>重要文字或内容避开此区域</span></div>
                                <div class="tools">
                                    <i class="el-icon-view" @click="showListImg(item.url)"></i>
                                    <i class="el-icon-scissors" @click="editListImg(item, index)"></i>
                                    <i class="el-icon-delete" @click="delListItem(item, index)"></i>
                                </div>
                                <div class="main-bottom-box-1440" v-if="height === 1440"><span>重要文字或内容避开此区域</span></div>
                                <div class="main-bottom-box-528" v-if="height === 528"><span>重要文字或内容避开此区域</span></div>
                            </div>
                        </div>
                        <div class="right-name">{{item.name}}</div>
                        <div class="banner-btn">
                            <span class="is-banner" v-if="item.url === currentCover">当前宣传图</span>
                            <span class="set-banner" v-else @click="$emit('setCover', item.url)">设为游戏详情展示图</span>
                        </div>
                        <div class="banner-btn">
                            <span class="is-banner" v-if="item.url === currentBanner">当前banner</span>
                            <span class="set-banner" v-else @click="$emit('setBanner', item.url)">设为banner</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 编辑图片 -->
        <el-dialog
            title="编辑图片"
            class="drap-dialog-box"
            :visible.sync="showImgEdit"
            :show-close="false"
            :close-on-click-modal="false"
            :close-on-press-escape="false"
            width="90%">
            <div class="img-name">
                <span class="img-title">图片名称：</span>
                <el-input v-model.trim="currentItem.name" class="img-input" placeholder="建议输入名称以便于管理"></el-input>
            </div>
            <div class="desc-text">注：如裁剪框小于{{width}} x {{height}}，说明所上传图片尺寸不符和要求，建议 <b>更换图片</b> 或 <b>原图上传</b></div>
            <div class="drap-box">
                <div v-if="height === 1440 && showWrap" class="cut-wrap-1440-top" :style="{width: option.width + 'px'}">
                    <span>重要文字或内容避开此区域</span>
                </div>
                <div v-if="height === 1440 && showWrap" class="cut-wrap-1440-bottom" :style="{width: option.width + 'px'}">
                    <span>重要文字或内容避开此区域</span>
                </div>
                <div v-if="height === 528 && showWrap" class="cut-wrap-528-bottom" :style="{width: option.width + 'px'}">
                    <span>重要文字或内容避开此区域</span>
                </div>
                <vueCropper
                    class="cropper-box"
                    ref="cropper"
                    :img="option.img"
                    :autoCropWidth="option.width"
                    :autoCropHeight="option.height"
                    :outputSize="1"
                    :fixedBox="true"
                    :autoCrop="true"
                    :centerBox="true"
                    :infoTrue="true"
                    :canMoveBox="false"
                    :enlarge="enlarge"
                ></vueCropper>
            </div>
            <div slot="footer" class="dialog-footer">
                <div class="wrap-flag" v-if="height === 1440 || height === 528">
                    <span>显示最佳展示区</span>
                    <el-switch
                    v-model="showWrap">
                    </el-switch>
                </div>
                <div v-else></div>
                <div class="all-btn-box">
                    <el-button @click="cancleUploadImg">取 消</el-button>
                    <el-button type="primary" @click="cutImg">确 定</el-button>
                    <el-button v-if="newImg" type="success" @click="noCutImg">不裁剪原图上传</el-button>
                </div>
            </div>

        </el-dialog>

        <!-- 图片预览 -->
        <div
            v-if="showImg"
            @click="showImg = false"
            class="drap-show-img-box">
            <div class="img-box" v-if="currentImg === 1440">
                <img src="./img/1440.png" alt="">
            </div>
            <div class="img-box" v-else-if="currentImg === 528">
                <img src="./img/528.png" alt="">
            </div>
            <div class="img-box" v-else>
                <img :src="currentImg" alt="">
            </div>
        </div>
    </div>
</template>

<script>
import { VueCropper } from 'vue-cropper'
export default {
    name: 'uploadCutImgList',
    data () {
        return {
            option: {
                img: '',
                width: 328,
                height: 320
            },
            loading: false,
            showImgEdit: false,
            files: null,
            showImg: false,
            currentItem: {
                name: '',
                url: ''
            },
            currentIndex: 0,
            currentImg: 'https://pp.myapp.com/ma_pic2/0/shot_11955486_1_1571986072/550',
            currentBanner: '',
            currentCover: '',
            newImg: false, // 是否是新上传的图片
            enlarge: 3, // 图片放大比例
            showWrap: true
        }
    },
    props: {
        banner: {},
        cover: {},
        width: {
            default: 328
        },
        height: {
            default: 320
        },
        list: {
            default () {
                return []
            }
        }
    },
    watch: {
        banner (val) {
            this.currentBanner = val
        },
        cover (val) {
            this.currentCover = val
        }
    },
    created () {
        // 根据传入比例不同  裁剪框大小不同
        if (this.height === 1440) {
            this.option.width = this.width / 3
            this.option.height = this.height / 3
            this.enlarge = 3
        } else if (this.height === 528) {
            this.option.width = this.width / 2
            this.option.height = this.height / 2
            this.enlarge = 2
        } else if (this.height === 720) {
            this.option.width = this.width / 2
            this.option.height = this.height / 2
            this.enlarge = 2
        }
        this.currentBanner = this.banner
        this.currentCover = this.cover
    },
    methods: {
        imgInput (e) {
            this.files = e.target.files[0]
            let reader = new FileReader()
            reader.readAsDataURL(this.files)
            reader.onloadend = () => {
                this.option.img = reader.result
                // 新上传的图片 展示直接上传按钮
                this.newImg = true
                this.showImgEdit = true
            }
        },

        cancleUploadImg () {
            this.showImgEdit = false
            this.$refs.input.value = null
        },

        // 裁剪上传
        cutImg () {
            this.$refs.cropper.getCropBlob((data) => {
                this.files = data
                if (this.newImg) {
                    this.currentItem = {
                        url: this.option.img,
                        name: this.currentItem.name,
                        loading: true
                    }
                    this.list.unshift(this.currentItem)
                    this.newImg = false
                } else {
                    this.currentItem.loading = true
                }
                this.uploadImg()
            })
        },

        // 原图上传
        noCutImg () {
            this.currentItem = {
                url: this.option.img,
                name: this.currentItem.name,
                loading: true
            }
            this.list.unshift(this.currentItem)
            this.uploadImg()
        },

        // 上传图片
        async uploadImg () {
            this.showImgEdit = false
            let files = this.files
            if (!files) return
            let formData = new FormData()
            formData.append('file', files)
            formData.append('needTransform', 1)
            let config = {
                headers: {
                    'Content-Type': 'multipart/form-data'
                }
            }
            let res = await this.$http.post('/file/uploadPic', formData, config)
            if (res.code === '0') {
                this.currentItem.url = res.data
                this.currentItem.loading = false
                this.$set(this.list, this.list.indexOf(this.currentItem), this.currentItem)
            } else {
                this.$message({
                    type: 'error',
                    message: res.desc
                })
            }
            this.files = null
        },

        showListImg (url) {
            if (url === 720) return
            this.currentImg = url
            this.showImg = true
        },

        editListImg (item) {
            this.option.img = item.url
            this.currentItem = item
            // 不是新上传的图片 不展示直接上传按钮
            this.newImg = false
            this.showImgEdit = true
        },

        delListItem (item, index) {
            this.list.splice(index, 1)
        }

    },
    components: {
        VueCropper
    }
}
</script>

<style lang="scss">
    .upload-shear-img-com {
        .title-box {
            height: 30px;
            display: flex;
            align-items: center;
            margin-bottom: 10px;
            .title {
                font-size: 14px;
                font-weight: 500;
                .title-desc {
                    font-size: 12px;
                    font-weight: normal;
                    margin-left: 10px;
                }
            }
            .upload-btn {
                position: relative;
                top: 0;
                left: 0;
                z-index: 1;
                overflow: hidden;
                width: 100px;
                height: 30px;
                background-color: #409eff;
                margin-left: 10px;
                border-radius: 4px;
                &:hover {
                    opacity: .8;
                }
                .btn-text {
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    z-index: 1;
                    width: 100%;
                    transform: translate(-50%, -50%);
                    font-size: 14px;
                    text-align: center;
                    color: #ffffff;
                }
                .input-file {
                    position: absolute;
                    top: 0;
                    left: 0;
                    z-index: 2;
                    opacity: 0;
                    width: 100%;
                    height: 100%;
                    cursor: pointer;
                }
            }
        }

        .input-all-box {
            display: flex;
            .input-show-box {
                cursor: pointer;
                > img {
                    width: 100%;
                    height: 100%;
                }
            }
            .right-box {
                margin-left: 20px;
                flex: 1;
                overflow-x: scroll;
                .right-box-with {
                    display: flex;
                    .right-all-box {
                        margin-right: 20px;
                        .right-img-box {
                            position: relative;
                            top: 0;
                            left: 0;
                            z-index: 1;
                            &:hover {
                                .wrap-img-box {
                                    display: block;
                                }
                            }
                            .img-box {
                                width: 100%;
                                height: 100%;
                                object-fit: cover;
                            }
                            .wrap-img-box {
                                display: none;
                                position: absolute;
                                top: 0;
                                left: 0;
                                z-index: 1;
                                width: 100%;
                                height: 100%;
                                color: #ffffff;
                                font-size: 20px;
                                background-color: rgba(0, 0, 0, .3);
                                .tools {
                                    width: 100%;
                                    height: 100%;
                                    display: flex;
                                    align-items: center;
                                    justify-content: space-around;
                                    > i {
                                        cursor: pointer;
                                    }
                                }
                                .main-top-box-1440 {
                                    top: 0;
                                    height: 48px;
                                }
                                .main-bottom-box-1440 {
                                    bottom: 0;
                                    height: 94px;
                                }
                                .main-bottom-box-528 {
                                    bottom: 0;
                                    height: 32px;
                                }
                                .main-bottom-box-528, .main-top-box-1440, .main-bottom-box-1440 {
                                    position: absolute;
                                    left: 0;
                                    z-index: 1;
                                    width: 100%;
                                    background-color: rgba(187,0,0, .6);
                                    font-size: 16px;
                                    color: #ffffff;
                                    text-align: center;
                                    > span {
                                        position: absolute;
                                        width: 100%;
                                        top: 50%;
                                        left: 50%;
                                        z-index: 1;
                                        transform: translate(-50%, -50%);
                                    }
                                }
                            }
                        }
                        .right-name {
                            margin-top: 6px;
                            font-size: 12px;
                            word-break: break-all;
                            text-overflow: ellipsis;
                            display: -webkit-box;
                            -webkit-box-orient: vertical;
                            -webkit-line-clamp: 2;
                            overflow: hidden;
                        }
                        .banner-btn {
                            font-size: 12px;
                            // text-align: center;
                            .set-banner {
                                cursor: pointer;
                                color: #409eff;
                                &:hover {
                                    text-decoration: underline;
                                    opacity: .8;
                                }
                            }
                            .is-banner {
                                color: #67C23A;
                            }
                        }
                    }
                }
            }
        }

        // 编辑图片
        .drap-dialog-box {
            .el-dialog {
                margin-top: 50px;
            }
            .el-dialog__body {
                padding: 0 20px;
            }
            .img-name {
                font-size: 14px;
                .img-title {
                    font-weight: 500px;
                    color: red;
                }
                .img-input {
                    width: 500px;
                    > input {
                        border-radius: 0px;
                        border: none;
                        border-bottom: 1px solid #DCDFE6;
                    }
                }
            }
            .desc-text {
                margin: 10px 0;
                font-weight: normal;
            }
            .drap-box {
                position: relative;
                top: 0;
                left: 0;
                z-index: 1;
                height: 500px;
                .cropper-box {
                    height: 500px;
                }
                .cut-wrap-1440-top {
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    z-index: 1;
                    height: 64px;
                    transform: translate(-50%, -240px);
                    background-color: rgba(187, 0, 0, 0.6);
                }
                .cut-wrap-1440-bottom {
                    position: absolute;
                    bottom: 50%;
                    left: 50%;
                    z-index: 1;
                    height: 125.3px;
                    transform: translate(-50%, 240px);
                    background-color: rgba(187, 0, 0, 0.6);
                }
                .cut-wrap-528-bottom {
                    position: absolute;
                    bottom: 50%;
                    left: 50%;
                    z-index: 1;
                    height: 64px;
                    transform: translate(-50%, 132px);
                    background-color: rgba(187, 0, 0, 0.6);
                }
                .cut-wrap-1440-top, .cut-wrap-1440-bottom, .cut-wrap-528-bottom {
                    font-size: 16px;
                    color: #ffffff;
                    text-align: center;
                    > span {
                        position: absolute;
                        width: 100%;
                        top: 50%;
                        left: 50%;
                        z-index: 1;
                        transform: translate(-50%, -50%);
                    }
                }
            }
            .dialog-footer {
                display: flex;
                justify-content: space-between;
                .wrap-flag {
                    display: flex;
                    align-items: center;
                    font-size: 14px;
                    font-weight: 500;
                    > span {
                        margin-right: 5px;
                    }
                }
            }
        }

        .drap-show-img-box {
            position: fixed;
            top: 0;
            right: 0;
            left: 0;
            bottom: 0;
            width: 100%;
            height: 100%;
            z-index: 99;
            background-color: rgba(0, 0, 0, .5);
            .img-box {
                width: 100%;
                height: 100%;
                display: flex;
                align-items: center;
                justify-content: center;
                padding: 20px;
                > img {
                    max-width: 100%;
                    max-height: 100%;
                }
            }
        }
    }
</style>
